<template>
  <el-form :model="eventsFormModel" label-width="80px" label-position="left" size="mini">
    <el-empty v-if="!eventsFormModel.events || eventsFormModel.events.length <= 0">
      <el-button type="primary" size="mini" plain @click="handleAddEvent">立即新增事件</el-button>
    </el-empty>
    <el-card :key="item.id" v-for="(item, index) in eventsFormModel.events" shadow="hover">
      <el-form-item label="触发条件" :prop="`events.${index}.conditions`">
        <span slot="default" :style="{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}">
          <condition-editor
            :condition-elements="conditionElements"
            v-model="item.conditions">
          </condition-editor>
          <span><el-button size="mini" type="danger" icon="el-icon-delete" circle
                           @click="handleDeleteEvent(index)"></el-button></span>
        </span>

      </el-form-item>
      <el-form-item label="动作类型" :prop="`events.${index}.eventType`">
        <el-radio-group
          v-model="item.eventType"
        >
          <el-radio
            v-for="op in eventTypes"
            :key="op.value+item.id"
            :label="op.value">
            {{ op.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-card>
        <Component :is="item.eventType + '-event'" v-model="item.action" :elements="conditionElements"/>
      </el-card>
    </el-card>
    <el-button :style="{width: '100%'}" plain v-if="eventsFormModel.events && eventsFormModel.events.length > 0"
               type="primary" @click="handleAddEvent" size="small">添加事件
    </el-button>

  </el-form>
</template>

<script>
import util from "@/libs/util";
import ConditionEditor from "./condition-editor";
import Events from './events'

export default {
  name: "EventEditor",
  components: {
    ConditionEditor,
    ...Events
  },
  props: {
    // 事件初始值
    value: {
      type: Object,
      default: () => {
        return {events: []}
      }
    },
    // 条件元素
    conditionElements: {
      type: Array,
      default() {
        return []
      }
    },
    // TODO 事件配置
    eventConfig: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      volume: 0,
      eventTypes: [
        {icon: '', label: '外链', value: 'out-link'},
        {icon: '', label: '内链', value: 'in-link'},
        {icon: '', label: '新增编辑', value: 'addEdit'},
        {icon: '', label: '属性修改', value: 'static'},
        {icon: '', label: '消息对话框', value: 'message'},
        {icon: '', label: 'API', value: 'dynamic'},
      ],
      eventsFormModel: this.value
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    handleAddEvent() {
      this.eventsFormModel.events.push(
        {
          id: util.uuid(8).toLowerCase(),
          eventType: 'static',
          action: {properties: []},
          conditions: []
        }
      )
    },
    handleDeleteEvent(index) {
      this.eventsFormModel.events.splice(index, 1)
    },
    uniqueKey() {
      return util.uuid(8)
    }
  }
}
</script>

<style scoped>

</style>
